<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{padding: 0;margin: 0;}
        li{list-style: none;}
        img{
            vertical-align: top;
        }
        body{
            background-color: #f4f4f4;
        }
        .good-list{
            width: 1190px;
            margin: 20px auto;
            font-size: 13px;
            line-height: 20px;
        }

        .good-list .list{
            display: flex;
            /* justify-content: space-between; */
            flex-wrap: wrap;
        }

        .good-list .list .list-item{
            width: 19%;
            margin-right: 1.25%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px;
            margin-bottom: 10px;
        }
        .good-list .list .list-item:nth-child(5n){
            margin-right: 0;
        }
        .good-list .list .list-item img{
            /* width: 70%; */
            width: 144px;
            height: 144px;
            display: block;
            margin: 20px auto;
        }
        .good-list .list .list-item .title{
            /* 多行文本溢出隐藏 */
            display: -webkit-box;  /* 老版本盒模型 */
            -webkit-box-orient: vertical; /*设置对齐模式*/
            -webkit-line-clamp: 2; /*设置多行的行数，示例为2行*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .good-list .list .list-item .price{
            color:#f2272b;
        }
    </style>
</head>
<body>
    <div class="good-list">
        <ul class="list">
            <!-- <li class="list-item">
                <img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/216058/40/28659/115326/643cf848F6b2cb006/d914add7b7fb7187.jpg.avif" alt="">
                <div class="title">华硕（ASUS）天选4 英特尔酷睿i7 15.6英寸高性能电竞游戏本笔记本电脑(14核i7 16G 512G RTX4060 2.5K 165Hz P3广色域)灰</div>
                <div class="price">¥8299.00</div>
            </li>
            <li class="list-item">
                <img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/216058/40/28659/115326/643cf848F6b2cb006/d914add7b7fb7187.jpg.avif" alt="">
                <div class="title">华硕（ASUS）天选4 英特尔酷睿i7 15.6英寸高性能电竞游戏本笔记本电脑(14核i7 16G 512G RTX4060 2.5K 165Hz P3广色域)灰</div>
                <div class="price">¥8299.00</div>
            </li>
            <li class="list-item">
                <img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/216058/40/28659/115326/643cf848F6b2cb006/d914add7b7fb7187.jpg.avif" alt="">
                <div class="title">华硕（ASUS）天选4 英特尔酷睿i7 15.6英寸高性能电竞游戏本笔记本电脑(14核i7 16G 512G RTX4060 2.5K 165Hz P3广色域)灰</div>
                <div class="price">¥8299.00</div>
            </li>
            <li class="list-item">
                <img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/216058/40/28659/115326/643cf848F6b2cb006/d914add7b7fb7187.jpg.avif" alt="">
                <div class="title">华硕（ASUS）天选4 英特尔酷睿i7 15.6英寸高性能电竞游戏本笔记本电脑(14核i7 16G 512G RTX4060 2.5K 165Hz P3广色域)灰</div>
                <div class="price">¥8299.00</div>
            </li>
            <li class="list-item">
                <img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/216058/40/28659/115326/643cf848F6b2cb006/d914add7b7fb7187.jpg.avif" alt="">
                <div class="title">华硕（ASUS）天选4 英特尔酷睿i7 15.6英寸高性能电竞游戏本笔记本电脑(14核i7 16G 512G RTX4060 2.5K 165Hz P3广色域)灰</div>
                <div class="price">¥8299.00</div>
            </li> -->
        </ul>
    </div>
</body>
<script>
    // JS动态生成方案
    // a. DOM创建 => document.createElement() 
    // 一般用于写插件  所有元素创建在方法内部已经写好 -> 只用调用即可
    // 优点: 
    // 创建的元素节点是一个真正的元素 => 可以操作该元素改变内容 样式 属性 事件
    // 缺点: 
    // 对于复杂的html结构 => 创建比较麻烦
    
    // b. 借助模板字符串 配合 innerHTML(获取和设置元素的html结构)

    // 优点: 
    //   可以根据既定的模板快速生成html结构 (可以操作元素的内容 样式 属性)

    // 缺点:
    //   在html结构没有渲染到页面之前 => 没有元素,只是字符串 => 所以无法给对应的元素绑定事件  
    //   只有等到元素渲染之后 才能获取元素绑定事件

    // JS动态生成实现流程 
    // 1. 先写静态页面
    // 2. 在改为动态的

    var listUl = document.getElementsByClassName("list")[0];

    let xhr = new XMLHttpRequest(); // 0

    xhr.open("get","../data/goods.json",true); // 1
 
    xhr.send();  // 1

    xhr.onreadystatechange = function(){
        // 2 3 4
        if(xhr.readyState == 4 && xhr.status == 200){
            var res = xhr.responseText;
            var data = JSON.parse(res);
            console.log(data);

            // var html = "";
            // data.forEach((item)=>{
            //     // console.log(item);
            //     var {goodsId,goodsName,goodsImg,goodsPrice} = item;

            //     html += `<li class="list-item">
            //         <img src="${goodsImg}" alt="">
            //         <div class="title">${goodsName}</div>
            //         <div class="price">¥${goodsPrice}</div>
            //     </li>`;
            // })
            // listUl.innerHTML = html;


            // 函数的参数解构  => 如果已经确定函数的参数是数组/对象 => 可以对该参数进行解构
            var html = "";
            data.forEach(({goodsId,goodsName,goodsImg,goodsPrice})=>{
                // console.log(item);
                html += `<li class="list-item">
                    <img src="${goodsImg}" alt="">
                    <div class="title">${goodsName}</div>
                    <div class="price">¥${goodsPrice}</div>
                </li>`;
            })
            listUl.innerHTML = html;
            


        }
    }




</script>
</html>